import { useAccount } from "@/stores/account";
import { useCommentAppoint, useCommentBatch, useCommentLoop, useCommentTimer } from "@/stores/comment";
import { useSession } from "@/stores/sesstion";
import { defineComponent, ref } from "vue";
import styles from './styles.module.css';
import { countdown, showToast } from "@/utils/utils";
import LiveInfo from '@/components/liveInfo';



export default defineComponent({
    setup(_props, _ctx) {
        const session = useSession();
        const appoint = useCommentAppoint();
        const timer = useCommentTimer();
        const batch = useCommentBatch();
        const loop = useCommentLoop();
        const tkl = ref('');
        session.pull();

        const stop = () => {
            appoint.stop();
            timer.stop();
            batch.stop();
            loop.stop();

        }
        return () => {
            const expireStr = countdown(session.expireTime, session.nowTime) || '已过期';
            if (session.isExpire) {
                stop();
            }
            return (
                <div class={[styles.app]}>
                    <el-row >
                        <el-col span={8} class={styles.textarea}>
                            <el-input
                                size="small"
                                type="textarea"
                                autosize={{ minRows: 3, maxRows: 3 }}
                                placeholder="请输入淘口令"
                                v-model={tkl.value}
                                clearable>
                            </el-input>
                        </el-col>
                        <el-col span={16}>

                            <div class={styles.body}>
                                <el-row>
                                    <el-col span={13}>
                                        <el-row>
                                            <el-col span={12}>
                                                <p class={styles.text}>主播昵称:{session.nick}</p>
                                            </el-col>
                                            <el-col span={12}>
                                                <p class={styles.text}>主播ID:{session.id}</p>
                                            </el-col>
                                        </el-row>
                                        <el-row >
                                            <el-col span={4}>
                                                <el-button style="width:90%;" size="small" type="primary" onClick={() => {
                                                    if (session.isBind) {
                                                        showToast('账号已绑定过主播了');
                                                        return;
                                                    }
                                                    if (!tkl.value) {
                                                        showToast('请输入淘口令');
                                                        return;
                                                    }

                                                    session.resolving(tkl.value);
                                                }}>解析</el-button>
                                            </el-col>
                                            <el-col span={4}>
                                                <el-button style="width:90%;" size="small" type="primary" onClick={async () => {
                                                    if (session.isBind) {
                                                        showToast('账号已绑定过主播了');
                                                        return;
                                                    }
                                                    if (!tkl.value) {
                                                        showToast('请输入淘口令');
                                                        return;
                                                    }

                                                    const result = await session.bind();
                                                    if (result) {
                                                        showToast('绑定成功');
                                                    }
                                                }}>绑定主播</el-button>
                                            </el-col>
                                            <el-col span={4}>
                                                <el-button style="width:90%;" size="small" type="primary" onClick={() => {
                                                    if (!tkl.value) {
                                                        showToast('请输入淘口令');
                                                        return;
                                                    }
                                                    session.live(tkl.value);
                                                }}>刷新开播</el-button>
                                            </el-col>
                                            <el-col span={8}>
                                                <p class={styles.text}>过期时间:
                                                    {expireStr}</p>
                                            </el-col>
                                            <el-col span={4}>
                                                <el-button style="width:90%;" size="small" type="primary" onClick={() => {
                                                    stop();
                                                    session.loginout();
                                                }}>退出登录</el-button>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                    <el-col span={7}>
                                        <LiveInfo class="o"></LiveInfo>
                                    </el-col>

                                </el-row>

                            </div>
                            <div class={styles.noText}>
                                <span>公告：</span> 欢迎使用 : 优淘互动，如有发现用软件云端帐号，去别人直播问捣乱一律封号，不售后
                            </div>

                        </el-col>


                    </el-row>

                </div >
            );
        }
    },
});










